<!-- <template>中编写页面展示的内容 -->
<template>
  <div>
    <input type="button" value="滚起来" @click="start">
    <input type="button" value="别滚了" @click="stop">
    <h1>{{ message }}</h1>

  </div>
</template>
<!--传统函数（function）：setInterval 里的回调函数，this 指向会变成 window（非严格模式）或 undefined（严格模式），
无法访问组件实例的 this.message、this.timer 。
箭头函数：箭头函数没有自己的 this，会 “继承” 外层作用域（这里是 start 方法里的 this ，即组件实例），
能正常拿到 this.message 修改数据，保证逻辑正确。  -->
<!-- <script>中编写JS脚本代码 -->
<script>
export default {
  data(){
    return{
      message:"12345",
      timer:null//一个唯一的定时器 ID
    }
  },
  methods:{
    start(){
        if(this.timer)return;// 如果 timer 已经有值（正在滚），就不重复创建
        this.timer=window.setInterval(()=>{
            let begin=this.message.substring(0,1)
            let close=this.message.substring(1)
            this.message=close+begin
        },1000)
    },
    stop(){
        clearInterval(this.timer)
        this.timer=null
    }

  }
}
</script>

<!-- <style>中编写css样式代码 -->
<style scoped>

</style>